<template>
  <div>
    <Search @refresh="onRefresh" @search="onSearch" @deleteAll="deleteChannelAll">
      <el-button type="primary" :loading="false" @click="dialogVisible = true">添加包号</el-button>
      <el-button type="primary" :loading="false" @click="qjupdataVisible = true">区间修改</el-button>
      <el-button type="danger" :loading="false" @click="deletedialog = true">区间删除</el-button>
      <template v-slot:footer>
        <div class="geli">|</div>
        <el-button type="success" :loading="false" @click="addacc = true" icon="el-icon-upload2">一键上号</el-button>
        <el-button type="primary" :loading="false" @click="deleteacc = true" icon="el-icon-download">一键下号</el-button>
        <el-button type="danger" :loading="false" icon="el-icon-shopping-cart-1" @click="delacc = true">清空账号</el-button>
      </template>
    </Search>

    <!-- ============================================================================ -->
    <!-- ============================================================================ -->
    <el-table :data="tableData" ref="qtable" border v-loading="loading">

      <el-table-column prop="mark" label="包号" align="center" />

      <el-table-column prop="remark" label="备注" align="center" />

      <el-table-column label="对应渠道" align="center">
        <template #default="scope">{{ scope.row.channel }}</template>
      </el-table-column>

      <el-table-column label="用户名" align="center">
        <template #default="scope">{{ scope.row.username }}</template>
      </el-table-column>

      <el-table-column label="当日激活" align="center">
        <template #default="scope">{{ scope.row.todayjihuo }}</template>
      </el-table-column>

      <el-table-column label="当日注册" align="center">
        <template #default="scope">{{ scope.row.todayzhuce }}</template>
      </el-table-column>

      <el-table-column label="当日报名" align="center">
        <template #default="scope">{{ scope.row.todaybaomin }}</template>
      </el-table-column>

      <el-table-column label="当日复制" align="center">
        <template #default="scope">{{ scope.row.todaycopy }}</template>
      </el-table-column>

      <el-table-column label="跳转异常" align="center">
        <template #default="scope">{{ scope.row.todaytiaozhuan }}</template>
      </el-table-column>

      <el-table-column label="虚假职位" align="center">
        <template #default="scope">{{ scope.row.fake == 1 ? "是" : "否" }}</template>
      </el-table-column>

      <el-table-column label="是否跳转" align="center">
        <template #default="scope">
          <el-switch v-model="scope.row.tiaozhuan" active-color="#13ce66" inactive-color="#ff4949" @change='onChangeTiao(scope.row)'>
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column label align="center" width="300">
        <template #default="scope">
          <div class="flix">
            <div class="button-b">
              <i class="el-icon-user"></i>
              <el-button type="text" @click="onClickContact(scope.row)">联系方式</el-button>
            </div>
            <div class="button-b">
              <i class="el-icon-s-platform"></i>
              <el-button type="text" @click="onClickQudao(scope.row)">渠道数据</el-button>
            </div>
            <div class="button-b">
              <i class="el-icon-edit-outline"></i>
              <el-button type="text" @click="onClickUpdate(scope.row)">修改</el-button>
            </div>
            <div class="button">
              <i class="el-icon-delete"></i>
              <el-button type="text" @click="deleteChannel(scope.row)">删除</el-button>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- ============================================================================ -->
    <!-- ============================================================================ -->
    <div class="pagination">
      <el-pagination background layout="prev, pager, next" :total="total" :page-size="15" hide-on-single-page @current-change="onCurrentChange"></el-pagination>
    </div>
    <!-- ============================================================================ -->
    <!-- ============================================================================ -->
    <el-dialog title="区间修改" v-model="qjupdataVisible" width="30%" append-to-body destroy-on-close :close-on-click-modal="false">
      <div class="channel">
        <span>区间包号:</span>
        <div class="w100">
          <el-input v-model="qjupdata.qjarr" placeholder="请输入区间包号"></el-input>
        </div>
      </div>
      <div class="channel">
        <span>渠道名:</span>
        <el-select v-model="qjupdata.channel" placeholder="请选择" class="w100">
          <el-option v-for="item in qudaolist" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </div>
      <div style="height: 10px"></div>
      <div class="channel">
        <span>虚假职位:</span>
        <div>
          <el-radio v-model="qjupdata.fake" :label="1">是</el-radio>
          <el-radio v-model="qjupdata.fake" :label="0">否</el-radio>
        </div>
      </div>
      <div class="channel">
        <span>白名单:</span>
        <div>
          <el-radio v-model="qjupdata.whitelist" :label="true">是</el-radio>
          <el-radio v-model="qjupdata.whitelist" :label="false">否</el-radio>
        </div>
      </div>

      <div class="channel">
        <span>屏蔽地区:</span>
        <div>
          <el-input type="textarea" :rows="2" placeholder="请输入要屏蔽的地区以逗号分隔" v-model="setChannel.qidu"></el-input>
        </div>
      </div>
      <div class="channel">
        <span>渠道隐藏:</span>
        <div>
          <el-radio v-model="qjupdata.qudaohide" :label="true">是</el-radio>
          <el-radio v-model="qjupdata.qudaohide" :label="false">否</el-radio>
        </div>
      </div>
      <div class="channel" v-if="qjupdata.qudaohide">
        <div class="isradio">
          <el-input v-model="qjupdata.markurl" placeholder="请速度跳转url,可为空"></el-input>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="qjupdataVisible = false" size="small">取 消</el-button>
          <el-button type="primary" @click="onSetqjUpdate" size="small">区间修改</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- ============================================================================ -->
    <!-- ============================================================================ -->
    <el-dialog title="修改数据" v-model="updataVisible" width="30%" append-to-body destroy-on-close :close-on-click-modal="false">

      <div class="channel">
        <span>备注:</span>
        <div>
          <el-input v-model="setChannel.remark"></el-input>
        </div>
      </div>

      <div class="channel">
        <span>渠道名:</span>
        <el-select v-model="setChannel.channel" placeholder="请选择" class="w100">
          <el-option v-for="item in qudaolist" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </div>
      <div style="height: 10px"></div>
      <div class="channel">
        <span>虚假职位:</span>
        <div>
          <el-radio v-model="setChannel.fake" :label="1">是</el-radio>
          <el-radio v-model="setChannel.fake" :label="0">否</el-radio>
        </div>
      </div>
      <div class="channel">
        <span>是否去重:</span>
        <div>
          <el-radio v-model="setChannel.deduplication" :label="true">是</el-radio>
          <el-radio v-model="setChannel.deduplication" :label="false">否</el-radio>
        </div>
      </div>
      <div class="channel">
        <span>web模式:</span>
        <div>
          <el-radio v-model="setChannel.webmodel" :label="true">是</el-radio>
          <el-radio v-model="setChannel.webmodel" :label="false">否</el-radio>
        </div>
      </div>
      <div class="channel">
        <span>联调白名单:</span>
        <div>
          <el-radio v-model="setChannel.whitelist" :label="true">是</el-radio>
          <el-radio v-model="setChannel.whitelist" :label="false">否</el-radio>
        </div>
      </div>

      <div class="channel">
        <span>渠道隐藏:</span>
        <div>
          <el-radio v-model="setChannel.qudaohide" :label="true">是</el-radio>
          <el-radio v-model="setChannel.qudaohide" :label="false">否</el-radio>
        </div>
      </div>
      <div class="channel" v-if="setChannel.qudaohide">
        <div class="isradio">
          <el-input v-model="setChannel.markurl" placeholder="请输入跳转url,可为空 例如 http://www.baidu.com"></el-input>
        </div>
      </div>

      <div class="channel">
        <span>跳转地址:</span>
        <div>
          <el-input v-model="setChannel.tiaourl" placeholder="请输入跳转url 例如 http://www.baidu.com"></el-input>
        </div>
      </div>

      <div class="channel">
        <span>屏蔽地区:</span>
        <div>
          <el-input type="textarea" :rows="2" placeholder="请输入要屏蔽的地区以逗号分隔 例如 北京,上海" v-model="setChannel.qidu"></el-input>
        </div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="updataVisible = false" size="small">取 消</el-button>
          <el-button type="primary" @click="onSetUpdate" size="small">修改数据</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- ============================================================================ -->
    <!-- ============================================================================ -->
    <el-dialog title="添加包号" v-model="dialogVisible" width="30%" append-to-body destroy-on-close :close-on-click-modal="false">
      <div class="channel">
        <span>渠道名:</span>
        <el-select v-model="channel" placeholder="请选择" class="w100">
          <el-option v-for="item in qudaolist" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </div>
      <div class="channel">
        <span>包号区间 (以"-"分割 例如:10-20):</span>
        <div class="w100">
          <el-input v-model="mark" placeholder="请输入内容"></el-input>
        </div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false" size="small">取 消</el-button>
          <el-button type="primary" @click="onAddMark" size="small">添加包号</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- ============================================================================ -->
    <!-- ============================================================================ -->
    <el-dialog title="区间删除" v-model="deletedialog" width="30%" append-to-body destroy-on-close :close-on-click-modal="false">
      <div class="channel">
        <span>包号区间 (以"-"分割 例如:10-20):</span>
        <div class="w100">
          <el-input v-model="delmark" placeholder="请输入内容"></el-input>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="deletedialog = false" size="small">取 消</el-button>
          <el-button type="danger" @click="ondeleteContact" size="small">区间删除</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- ============================================================================ -->
    <!-- ============================================================================ -->
    <el-dialog title="一键上号" v-model="addacc" width="30%" append-to-body destroy-on-close :close-on-click-modal="false">
      <div class="channel">
        <span>(区间以"-"分割 例如:10-20,不是区间以","分割"):</span>
        <div class="w100">
          <el-input v-model="addmark" placeholder="请输入区间包号"></el-input>
        </div>

        <div class="qujian">
          <span>联系方式:</span>
          <div class="radio-ma">
            <el-radio v-model="type" label="0">QQ</el-radio>
            <el-radio v-model="type" label="1">微信</el-radio>
            <!-- <el-radio v-model="type" label="2">手机号</el-radio> -->
            <el-radio v-model="type" label="2">微信公众号</el-radio>
          </div>
          <el-input type="textarea" :rows="10" placeholder="请输入联系方式" v-model="textadd"></el-input>
        </div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addacc = false" size="small">取 消</el-button>
          <el-button type="success" @click="onAddAcc" size="small">一键上号</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- ============================================================================ -->
    <!-- ============================================================================ -->
    <el-dialog title="一键下号" v-model="deleteacc" width="30%" append-to-body destroy-on-close :close-on-click-modal="false">
      <div style="margin: 30px auto;width: 150px;">
        <el-radio v-model="type1" label="0">QQ</el-radio>
        <el-radio v-model="type1" label="1">其他</el-radio>
      </div>
      <el-input type="textarea" :rows="10" placeholder="请输入联系方式" v-model="textdel"></el-input>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="deleteacc = false" size="small">取 消</el-button>
          <el-button type="primary" @click="ondeleteAcc" size="small">一键下号</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- ============================================================================ -->
    <!-- ============================================================================ -->
    <el-dialog title="清空账号" v-model="delacc" width="30%" append-to-body destroy-on-close :close-on-click-modal="false">
      <div class="channel">
        <span>(区间以"-"分割 例如:10-20,不是区间以","分割"):</span>
        <div class="w100">
          <el-input v-model="addmarkall" placeholder="请输入区间包号"></el-input>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="delacc = false" size="small">取 消</el-button>
          <el-button type="primary" @click="ondelacc" size="small">清空账号</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- ============================================================================ -->
    <!-- ============================================================================ -->
    <el-dialog :title="obj.dist" v-model="qudaodata" width="60%" append-to-body destroy-on-close :close-on-click-modal="false">
      <el-divider content-position="left">
        <b>当日数据</b>
      </el-divider>

      <el-row :gutter="20" style="justify-content: space-between;">
        <el-col :span="6">
          <el-card class="box-card">
            <el-row :gutter="20">
              <el-col :span="5"></el-col>
              <el-col :span="18">
                <div class="grid-content purple">{{ toThousands(obj.today_jihuo) }} 次</div>
                <div class>今日激活量</div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card">
            <el-row :gutter="20">
              <el-col :span="5"></el-col>
              <el-col :span="18">
                <div class="grid-content purple">{{ toThousands(obj.today_zhuce) }} 次</div>
                <div class>今日注册量</div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card">
            <el-row :gutter="20">
              <el-col :span="5"></el-col>
              <el-col :span="18">
                <div class="grid-content purple">{{ toThousands(obj.today_baomin) }} 次</div>
                <div class>今日报名量</div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card">
            <el-row :gutter="20">
              <el-col :span="5"></el-col>
              <el-col :span="18">
                <div class="grid-content purple">{{ toThousands(obj.today_copy) }} 次</div>
                <div class>今日复制量</div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="qudaodata = false" size="small">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang='ts'>
import { reactive, ref, toRefs } from "vue";
import { Get, Post } from "@/api";
import Search from "@/components/search/Search.vue";
import { $message, time } from "@/components/element";
import $routet from "@/router/index";
const options = require("@/assets/data.json");
export default {
  name: " ",
  components: { Search },
  setup() {
    const data = reactive({
      tableData: [],
      total: 0,
      loading: false,
      dialogVisible: false,
      deletedialog: false,
      updataVisible: false,
      qjupdataVisible: false,
      deleteacc: false,
      delacc: false,
      addacc: false,
      qudaodata: false,
      type: "0",
      channel: "",
      mark: "",
      delmark: "",
      addmarkall: "",
      addmark: "",
      qudaolist: [],
      value: [],
      textdel: "",
      textadd: "",
      type1: "0",
    });

    /* 渠道数据 */
    const qudaoDataObj = reactive({
      obj: {
        today_jihuo: 0,
        today_zhuce: 0,
        today_baomin: 0,
        today_copy: 0,
        today_tiaozhuan: 0,
        dist: "xx",
      },
    });
    const onClickQudao = async (row: any) => {
      data.qudaodata = true;
      const result = await Get({
        url: "/qudaotongji",
        data: { mark: row.mark },
      });
      if (result.data.length > 0) {
        qudaoDataObj.obj.dist = `${row.mark}号包渠道数据`;
        result.data.forEach((element: any) => {
          switch (element._id) {
            case "jihuo":
              qudaoDataObj.obj.today_jihuo = element.number;
              break;
            case "zhuche":
              qudaoDataObj.obj.today_zhuce = element.number;
              break;
            case "fuzhi":
              qudaoDataObj.obj.today_copy = element.number;
              break;
            case "baomin":
              qudaoDataObj.obj.today_baomin = element.number;
              break;
            case "tiaozuan":
              qudaoDataObj.obj.today_tiaozhuan = element.number;
              break;
          }
        });
      } else {
        qudaoDataObj.obj = {
          today_jihuo: 0,
          today_zhuce: 0,
          today_baomin: 0,
          today_copy: 0,
          today_tiaozhuan: 0,
          dist: `${row.mark}号包渠道数据`,
        };
      }
    };

    function toThousands(num: any) {
      return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");
    }

    /* 清空账号 */
    const ondelacc = async () => {
      let mark: string[] = [];
      let markArr: number[] = [];
      if (!/\-/.test(data.addmarkall) && !/\,/.test(data.addmarkall)) {
        mark = data.addmarkall.split(",");
        mark.forEach((element) => {
          markArr.push(parseInt(element));
        });
      }
      if (/\,/.test(data.addmarkall)) {
        mark = data.addmarkall.split(",");
        mark.forEach((element) => {
          markArr.push(parseInt(element));
        });
      }
      if (/\-/.test(data.addmarkall)) {
        mark = data.addmarkall.split("-");
        let marks;
        if (/\,/.test(mark[0])) {
          marks = mark[0].split(",")[mark[0].split(",").length - 1];
        }
        if (mark.length > 2 || mark.length == 0) {
          $message("error", "包号区间格式有误");
          return;
        }
        if (parseInt(mark[0]) >= parseInt(mark[1])) {
          $message("error", "包号1必须小于包号2");
          return;
        }
        if (mark[0] == "" || mark[1] == "") {
          $message("error", "包号区间格式有误");
          return;
        }

        if (marks) {
          for (let i = parseInt(marks) + 1; i <= parseInt(mark[1]); i++) {
            markArr.push(i);
          }
        } else {
          for (let i = parseInt(mark[0]); i <= parseInt(mark[1]); i++) {
            markArr.push(i);
          }
        }
      }

      let markArrs =
        markArr.length == 1 ? markArr : new Array(...new Set(markArr));

      console.log(markArrs);
      try {
        const upChannel = await Post({
          url: "deleteAccAll",
          data: { contact: markArrs },
        });
        if (upChannel.data.code == 200) {
          $message("success", upChannel.data.message);
          data.delacc = false;
        }
      } catch (error) {
        console.log(error);
        if (error.data) {
          $message("error", error.data.message);
        }
      }
    };

    /* 清空账号 */
    const deleteaccAll = async () => {};

    /* 一键上号 */
    const onAddAcc = async () => {
      let mark: string[] = [];
      let markArr: number[] = [];
      if (!/\-/.test(data.addmark) && !/\,/.test(data.addmark)) {
        mark = data.addmark.split(",");
        mark.forEach((element) => {
          markArr.push(parseInt(element));
        });
      }
      if (/\,/.test(data.addmark)) {
        mark = data.addmark.split(",");
        mark.forEach((element) => {
          markArr.push(parseInt(element));
        });
      }
      if (/\-/.test(data.addmark)) {
        mark = data.addmark.split("-");
        let marks;
        if (/\,/.test(mark[0])) {
          marks = mark[0].split(",")[mark[0].split(",").length - 1];
        }
        if (mark.length > 2 || mark.length == 0) {
          $message("error", "包号区间格式有误");
          return;
        }
        if (parseInt(mark[0]) >= parseInt(mark[1])) {
          $message("error", "包号1必须小于包号2");
          return;
        }
        if (mark[0] == "" || mark[1] == "") {
          $message("error", "包号区间格式有误");
          return;
        }

        if (marks) {
          for (let i = parseInt(marks) + 1; i <= parseInt(mark[1]); i++) {
            markArr.push(i);
          }
        } else {
          for (let i = parseInt(mark[0]); i <= parseInt(mark[1]); i++) {
            markArr.push(i);
          }
        }
      }

      let markArrs =
        markArr.length == 1 ? markArr : new Array(...new Set(markArr));
      try {
        type DContact = string[] | null;
        let contact: DContact;
        if (data.type == "0") {
          const reg = new RegExp(/[0-9]{5,10}/g);
          contact = data.textadd.match(reg);
        } else {
          contact = data.textadd.split(/\s/);
        }
        // const contact = data.textadd.split(/\s/);
        if (!markArr || !contact) return $message("error", "不能为空");
        const addContactAcc = await Post({
          url: "addContactAcc",
          data: {
            markArr: markArrs,
            contact,
            type: data.type,
          },
        });
        if (addContactAcc.data.code == 200) {
          $message("success", addContactAcc.data.message);
          data.addacc = false;
          data.addmark = "";
          data.textadd = "";
        }
      } catch (error) {
        console.log(error);
        if (error.data) {
          $message("error", error.data.message);
        }
      }
    };

    /* 获取渠道列表*/
    const Getqudao = async () => {
      const list = await Get({
        url: "qudaoList",
      });
      data.qudaolist = list.data;
    };
    Getqudao();

    /* 路由跳转联系方式 */
    const onClickContact = async (data: any) => {
      $routet.push({ path: "/contact", query: { mark: data.mark } });
    };

    /* 添加包号 */
    const onAddMark = async () => {
      let mark: string[] = [];
      let markArr: number[] = [];
      if (!/\-/.test(data.mark) && !/\,/.test(data.mark)) {
        mark = data.mark.split(",");
        mark.forEach((element) => {
          markArr.push(parseInt(element));
        });
      }
      if (/\,/.test(data.mark)) {
        mark = data.mark.split(",");
        mark.forEach((element) => {
          markArr.push(parseInt(element));
        });
      }
      if (/\-/.test(data.mark)) {
        mark = data.mark.split("-");
        let marks;
        if (/\,/.test(mark[0])) {
          marks = mark[0].split(",")[mark[0].split(",").length - 1];
        }
        if (mark.length > 2 || mark.length == 0) {
          $message("error", "包号区间格式有误");
          return;
        }
        if (parseInt(mark[0]) >= parseInt(mark[1])) {
          $message("error", "包号1必须小于包号2");
          return;
        }
        if (mark[0] == "" || mark[1] == "") {
          $message("error", "包号区间格式有误");
          return;
        }

        if (marks) {
          for (let i = parseInt(marks) + 1; i <= parseInt(mark[1]); i++) {
            markArr.push(i);
          }
        } else {
          for (let i = parseInt(mark[0]); i <= parseInt(mark[1]); i++) {
            markArr.push(i);
          }
        }
      }
      let markArrs =
        markArr.length == 1 ? markArr : new Array(...new Set(markArr));

      try {
        if (!data.channel) return $message("error", "渠道名");
        const upChannel = await Post({
          url: "addChannel",
          data: { channel: data.channel, mark: markArrs },
        });
        if (upChannel.data.code == 200) {
          $message("success", upChannel.data.message);
          data.dialogVisible = false;
          data.mark = "";
          data.channel = "";
          onRefresh();
        }
      } catch (error) {
        console.log(error);
        if (error.data) {
          $message("error", error.data.message);
        }
      }
    };

    /* 分页 */
    let pageNo: number = 1;
    const onCurrentChange = async (val: number) => {
      pageNo = val;
      await getChannelList(val);
    };

    /* 查询列表 */
    const qtable = ref();
    const getChannelList = async (pageNo = 1) => {
      try {
        data.loading = true;
        const userListResult = await Get({
          url: "getChannel",
          data: {
            pageNo,
            pageSize: 15,
          },
        });
        data.tableData = userListResult.data.data;
        data.total = userListResult.data.total;
        qtable.value.doLayout();
        data.loading = false;
      } catch (error) {
        console.log(error);
        if (error.data) {
          $message("error", error.data.message);
        }
      }
    };
    getChannelList();

    /* 刷新 */
    const onRefresh = async () => {
      await getChannelList(pageNo);
    };

    /* 搜索 */
    const onSearch = async (valeu: string) => {
      if (/\d/.test(valeu)) {
        if (/\-/.test(valeu)) {
          const mark = valeu.split("-");
          if (mark.length > 2 || mark.length == 0) {
            $message("error", "包号区间格式有误");
            return;
          }
          if (parseInt(mark[0]) >= parseInt(mark[1])) {
            $message("error", "包号1必须小于包号2");
            return;
          }
          if (mark[0] == "" || mark[1] == "") {
            $message("error", "包号区间格式有误");
            return;
          }

          try {
            data.loading = true;
            const userListResult = await Get({
              url: "searchChannel",
              data: {
                markqj: mark,
              },
            });
            data.tableData = userListResult.data.data;
            data.total = userListResult.data.total;
            qtable.value.doLayout();
            data.loading = false;
          } catch (error) {
            console.log(error);
            if (error.data) {
              $message("error", error.data.message);
            }
          }
          return;
        }
        try {
          data.loading = true;
          const userListResult = await Get({
            url: "searchChannel",
            data: {
              mark: valeu,
            },
          });
          data.tableData = userListResult.data.data;
          data.total = userListResult.data.total;
          qtable.value.doLayout();
          data.loading = false;
        } catch (error) {
          console.log(error);
          if (error.data) {
            $message("error", error.data.message);
          }
        }
      } else {
        try {
          data.loading = true;
          const userListResult = await Get({
            url: "searchChannel",
            data: {
              channel: valeu,
            },
          });
          data.tableData = userListResult.data.data;
          data.total = userListResult.data.total;
          qtable.value.doLayout();
          data.loading = false;
        } catch (error) {
          console.log(error);
          if (error.data) {
            $message("error", error.data.message);
          }
        }
      }
    };

    /* 删除 */
    const deleteChannel = async (param: { _id: string }) => {
      try {
        const upChannel = await Post({
          url: "deleteChannel",
          data: {
            id: param._id,
          },
        });
        if (upChannel.data.code == 200) {
          $message("success", upChannel.data.message);
          onRefresh();
        }
      } catch (error) {
        console.log(error);
        if (error.data) {
          $message("error", error.data.message);
        }
      }
    };

    /* 删除全部 */
    const deleteChannelAll = async () => {
      try {
        const upChannel = await Post({
          url: "deleteChannelAll",
        });
        if (upChannel.data.code == 200) {
          $message("success", upChannel.data.message);
          onRefresh();
        }
      } catch (error) {
        console.log(error);
        if (error.data) {
          $message("error", error.data.message);
        }
      }
    };

    /* 区间删除 */
    const ondeleteContact = async () => {
      if (!/\-/.test(data.delmark)) {
        $message("error", "包号区间格式有误");
        return;
      }
      const delmark = data.delmark.split("-");
      if (delmark.length > 2 || delmark.length == 0) {
        $message("error", "包号区间格式有误");
        return;
      }
      if (parseInt(delmark[0]) >= parseInt(delmark[1])) {
        $message("error", "包号1必须小于包号2");
        return;
      }
      if (delmark[0] == "" || delmark[1] == "") {
        $message("error", "包号区间格式有误");
        return;
      }

      try {
        const upChannel = await Post({
          url: "deleteChannelxz",
          data: { mark: delmark },
        });
        if (upChannel.data.code == 200) {
          $message("success", upChannel.data.message);
          data.deletedialog = false;
          data.delmark = "";
          onRefresh();
        }
      } catch (error) {
        console.log(error);
        if (error.data) {
          $message("error", error.data.message);
        }
      }
    };

    const setChannel = reactive({
      channel: "",
      fake: 0,
      whitelist: false,
      qudaohide: false,
      id: "",
      markurl: "",
      qidu: "",
      deduplication: false,
      webmodel: false,
      tiaourl: "",
      tiaozhuan: false,
      remark: "",
    });
    /*修改状态  */
    const onClickUpdate = async (param: any) => {
      setChannel.channel = param.channel;
      setChannel.webmodel = param.webmodel;
      setChannel.fake = param.fake;
      setChannel.whitelist = param.whitelist;
      setChannel.id = param._id;
      setChannel.qudaohide = param.qudaohide;
      setChannel.markurl = param.markurl;
      setChannel.qidu = param.qidu;
      setChannel.deduplication = param.deduplication;

      setChannel.tiaourl = param.tiaourl;
      setChannel.tiaozhuan = param.tiaozhuan;
      setChannel.remark = param.remark;

      data.updataVisible = true;
    };
    /*修改数据 */
    const onSetUpdate = async () => {
      try {
        const upChannel = await Post({
          url: "updateChannel",
          data: { setChannel },
        });
        if (upChannel.data.code == 200) {
          $message("success", upChannel.data.message);
          data.updataVisible = false;
          onRefresh();
        }
      } catch (error) {
        console.log(error);
        if (error.data) {
          $message("error", error.data.message);
        }
      }
    };

    /* 修改是否跳转 */
    let quchong: any = null;
    const onChangeTiao = (value: any) => {
      if (quchong) {
        clearTimeout(quchong);
      }
      quchong = setTimeout(async () => {
        try {
          const upChannel = await Post({
            url: "updateChannel",
            data: {
              setChannel: { tiaozhuan: value.tiaozhuan, id: value._id },
            },
          });
          if (upChannel.data.code == 200) {
            $message("success", upChannel.data.message);
          }
        } catch (error) {
          console.log(error);
          if (error.data) {
            $message("error", error.data.message);
          }
        }
      }, 300);
    };

    const qjupdata = reactive({
      qjarr: "",
      channel: "",
      fake: 1,
      whitelist: true,
      qudaohide: true,
      markurl: "",
      qidu: "",
    });

    /* 区间修改 */
    const onSetqjUpdate = async () => {
      if (!/\-/.test(qjupdata.qjarr)) {
        $message("error", "包号区间格式有误");
        return;
      }
      const qjarr = qjupdata.qjarr.split("-");
      if (qjarr.length > 2 || qjarr.length == 0) {
        $message("error", "包号区间格式有误");
        return;
      }
      if (parseInt(qjarr[0]) >= parseInt(qjarr[1])) {
        $message("error", "包号1必须小于包号2");
        return;
      }
      if (qjarr[0] == "" || qjarr[1] == "") {
        $message("error", "包号区间格式有误");
        return;
      }

      try {
        const upChannel = await Post({
          url: "updateqjChannel",
          data: { qjupdata, qjarr },
        });
        if (upChannel.data.code == 200) {
          $message("success", upChannel.data.message);
          data.qjupdataVisible = false;
          onRefresh();
        }
      } catch (error) {
        console.log(error);
        if (error.data) {
          $message("error", error.data.message);
        }
      }
    };

    /* 一键下号 */
    const ondeleteAcc = async () => {
      type DContact = string[] | null;
      let contact: DContact;
      if (data.type1 == "0") {
        const reg = new RegExp(/[0-9]{5,10}/g);
        contact = data.textdel.match(reg);
      } else {
        contact = data.textdel.split(/\s/);
      }

      try {
        if (!data.textdel) return $message("error", "内容不能为空");
        const deleteResult = await Post({
          url: "deleteContactxz",
          data: { contact },
        });
        if (deleteResult.data.code == 200) {
          $message("success", deleteResult.data.message);
          data.deletedialog = false;
          data.textdel = "";
        }
      } catch (error) {
        if (error.data) {
          $message("error", error.data.message);
        }
      }
    };

    return {
      ...toRefs(data),
      ...toRefs(qudaoDataObj),
      setChannel,
      qjupdata,
      deleteChannel,
      onCurrentChange,
      onSetqjUpdate,
      onClickUpdate,
      deleteChannelAll,
      onSetUpdate,
      onRefresh,
      onSearch,
      qtable,
      time,
      ondeleteContact,
      onAddMark,
      onClickContact,
      options,
      ondeleteAcc,
      onAddAcc,
      deleteaccAll,
      ondelacc,
      onClickQudao,
      toThousands,
      onChangeTiao,
    };
  },
};
</script>
<style lang="less" scoped>
.grid-content {
  padding: 5px 0;
}
.purple {
  border-bottom: 1px solid #eee;
  font-size: 22px;
  white-space: nowrap; //不换行
  overflow: hidden; //超出隐藏
  text-overflow: ellipsis; //变成...
}
.isradio {
  margin-top: 20px;
}
.radio-ma {
  margin-bottom: 20px;
  text-align: center;
}
.qujian {
  margin-top: 25px;
}
.button,
.el-button--text {
  color: red;
}
.button:hover,
.el-button--text:hover {
  color: red;
}

.button-b {
  color: #409eff;
}
.button-b .el-button--text {
  color: #409eff;
}
.pagination {
  margin-top: 20px;
  display: flex;
  position: relative;
  .el-pagination {
    position: absolute;
    right: 0;
  }
}
.channel {
  text-align: center;
  width: 300px;
  margin: 0 auto;
  span {
    text-align: center;
    margin: 10px 0;
    display: flex;
  }
}
.flix {
  display: flex;
  justify-content: space-evenly;
}
.w100 {
  width: 100%;
  .el-input__inner {
    height: 40px;
  }
}
.geli {
  // border: 1px solid red;
  width: 80px;
  text-align: center;
  font-size: 20px;
  font-weight: bolder;
}
</style>